<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组合式API - setup</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      
    </div>
  </body>

  <script>
    const App = Vue.createApp({
        setup(){
            /** 普通javascript对象 **/
            let myData0={
                value:0
            }
            console.log(`Variable [myData0] ->`,myData0)
             /** Proxy 包装  **/
            let myData1= Vue.reactive({
                value : 0
            })
            console.log(`Variable [myData1] ->`,myData1)
            // 解构赋值后，可以直接用  value +=1, 
            //let { value } = myData1
            //console.log(`Variable [value] ->`,value)
            let { value } = Vue.toRefs(myData1)
            console.log(`Variable [value] ->`,value)
            
            /***
             * 独立的响应式值
             * 后面改值不能直接 myData+=1, 需要myData.value+=1 
             * 
             */
            let myData4 = Vue.ref(0)
            
            console.log(`Variable [myData4] ->`,myData4)

            function click(){
                myData4.value +=1
                console.log(myData4.value)
            }
            return {
                myData4,
                click
            }
        },
        template:`
          <h1>测试数据：{{myData4}}</h1>
          <button @click="click">点击</button>
        `
    })
    App.mount("#Application")

    /***
     * 执行结果
     * myData0 -> {value:0}
     * myData1 -> Proxy{value:0}
     * value -> ObjectRefImple 
     * myData4 -> RefImpl包装的 value 0
     * 
     * 
     **/ 

  </script>

</html>